<template>
  <el-dialog
    title="关联本体属性"
    :visible.sync="dialogFormVisible"
    :append-to-body="true"
    width="560px"
    :show-close="false"
    class="common-dialog map-dialog"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :destroy-on-close="true"
  >
    <el-table
      ref="table"
      v-loading="loading"
      :data="tableList"
      :cell-style="{ color: '#333333' }"
      :header-cell-style="{ background: '#F3F4F7', color: '#000000' }"
      max-height="600"
      @selection-change="handleSelectionChange"
    >
      >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column
        prop="propertyName"
        label="属性名"
        align="center"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        prop="propertyTypeName"
        label="属性值类型"
        align="center"
        show-overflow-tooltip
      >
      </el-table-column>
    </el-table>
    <div slot="footer" class="dialog-footer">
      <el-button @click="resetDialogForm">取 消</el-button>
      <el-button type="primary" @click="submitDialogForm">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
export default {
  name: "SelectOntologyProp",
  components: {},
  data: () => {
    return {
      propertyTypeObj: {
        text: "字符串",
        int: "整数值",
        float: "浮点值",
        date: "日期",
        datetime: "日期时间",
        coordinate: "坐标",
        array: "数组",
        image: "图片",
        file: "文件",
      },
      selectProperty: [],
      tableList: [],
      dialogFormVisible: false,
      loading: false,
    };
  },
  computed: {},
  created() {},
  methods: {
    show(ontologyId) {
      this.dialogFormVisible = true;
      this.loading = true;
      this.$axios
        .get(
          this.$api.knowledgeMap.ontologyProperty + "?ontologyId=" + ontologyId
        )
        .then((res) => {
          let code = res.data.code;
          if (code !== 200) {
            let message = res.data.message;
            this.$message.warning(message);
            return false;
          } else {
            this.tableList = res.data.data.map((ms) => {
              ms.propertyTypeName = this.propertyTypeObj[ms.propertyType];
              ms.ontologyPropertyId = ms.propertyId;
              return ms;
            });
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
    submitDialogForm() {
      this.$emit("select-property", this.selectProperty);
      this.resetDialogForm();
    },
    resetDialogForm() {
      this.dialogFormVisible = false;
    },
    handleSelectionChange(val) {
      if (val.length > 1) {
        this.$refs.table.clearSelection();
        this.$refs.table.toggleRowSelection(val.pop());
      } else if (val.length === 1) {
        this.selectProperty = val[0];
      } else {
        this.selectProperty = null;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
/deep/ .el-table__header-wrapper .el-checkbox {
  display: none !important;
}
</style>
